<template>
  <div class="filter-container">
    <el-form :inline="true" class="filter-form">
      <el-form-item label="学期">
        <el-select 
          :model-value="filters.termId" 
          placeholder="选择学期" 
          style="width: 250px;"
          @change="handleTermChange"
        >
          <el-option 
            v-for="term in terms" 
            :key="term.id" 
            :label="term.name" 
            :value="term.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程">
        <el-select 
          :model-value="filters.courseId" 
          placeholder="选择课程" 
          clearable 
          filterable
          style="width: 250px;"
          @change="handleCourseChange"
        >
          <el-option 
            v-for="course in filteredCourses" 
            :key="course.id" 
            :label="course.name" 
            :value="course.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TeachingMissionFilter',
  props: {
    filters: {
      type: Object,
      required: true
    },
    terms: {
      type: Array,
      default: () => []
    },
    filteredCourses: {
      type: Array,
      default: () => []
    }
  },
  emits: ['term-change', 'course-change', 'search', 'reset'],
  methods: {
    handleTermChange(value) {
      this.$emit('term-change', value)
    },
    handleCourseChange(value) {
      this.$emit('course-change', value)
    },
    handleSearch() {
      this.$emit('search')
    },
    handleReset() {
      this.$emit('reset')
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
</style>
